// 在深入研究核心概念之前，
// 我们得知道 Store 是用 defineStore() 定义的，它的第一个参数要求是一个独一无二的名字

// 导入 defineStore
import { defineStore } from 'pinia'


interface IMenuType {
  id: number;
  parentId: number;
  title: string;
  name: string;
  icon: string | null;
  hidden: number;
  children?: IMenuType[]
}


// 你可以对 `defineStore()` 的返回值进行任意命名，但最好使用 store 的名字，
// 同时以 `use` 开头且以 `Store` 结尾。(比如 `useUserStore`，`useCartStore`，`useProductStore`)
// 第一个参数是你的应用中 Store 的唯一 ID。
export const useUserStore = defineStore('userStore', {
  // 这里用的是 Option Store
  state: () => ({
    userName: '',   // 当前用户的昵称
    isCollapse: false,    // 控制左侧菜单导航 是否 折叠

    menus: [] as IMenuModel[],  //  首页左侧菜单导航的数据
  }),
  getters: {
    // 处理 menus 菜单的数据 方式一
    getMenuRoutes(state) {
      let menus: IMenuType[] = [...state.menus];
      // 1. 先对menus 菜单数据 进行排序 (按parentId的大小来排,因为我们知道 parentId为0的是一级菜单)
      menus.sort(function (a, b) {
        return a.parentId - b.parentId;
      });
      // console.log('sort排序处理后 : ', menus);
      // 2. 遍历 menus 数组
      menus.forEach((item) => {
        if (item.parentId == 0) {
          // 2.1 如果是 一级菜单  就给它添加 一个children数组项  待会用来装 对应的 子菜单(二级菜单)
          item.children = [];
        }
        // 2.2 处理 二级菜单  根据二级菜单 找到 一级菜单   索引
        const idx = menus.findIndex((el) => {
          return item.parentId === el.id;
        });

        // 2.3 如果 idx 结果 为 -1 ,  说明是一级菜单  反之就是二级菜单
        if (idx > -1) {
          menus[idx].children?.push(item);
        }
      });

      // 3. 过滤掉 二级菜单  只要一级菜单就够了   因为所有的二级菜单都已经加入到对应的一级菜单的children里面了
      menus = menus.filter(fitem => fitem.parentId == 0);
      // console.log('filter过滤处理后 : ', menus);

      return menus;
    },

    // 根据 menus菜单的数据 得到 权限列表
    getPermission(state) {
      return state.menus.map(item => item.name);
    },

    // 处理 menus 菜单的数据 方式二
    // getMenuRoutes(state) {
    //   let newMenus: IMenuType[] = [];
    //   // let newMenus: { [key: number]: IMenuType } = {};
    //   console.log(state.menus);

    //   // 1. 遍历menus数据,处理一级二级菜单
    //   state.menus.forEach((item) => {
    //     if (item.parentId == 0) {
    //       // 处理 一级菜单
    //       newMenus[item.id] = {
    //         ...item,
    //         children: newMenus[item.id]?.children    // 避免覆盖的问题
    //       };
    //       // newMenus[97] = {id:97,parentId:0,...,children:[二级菜单对象1,...]}
    //     } else {
    //       // 处理 二级菜单
    //       // 数据没有做排序,有可能先遍历到二级菜单对象,然后再遍历到一级菜单对象
    //       // 一开始就进入了else分支,说明 newMenus 里面都还是空的,因此需要做空的判断,不能直接push到children里面去
    //       // newMenus[97] = {children:[二级菜单对象1]}
    //       newMenus[item.parentId] ??= {} as IMenuType;
    //       newMenus[item.parentId].children ??= []  // ??=  空(null)赋值运算符  判断是否为空  如果为空  赋值 =号右边的
    //       newMenus[item.parentId].children?.push(item);
    //     }
    //   })

    //   console.log('新菜单 : ', newMenus);
    //   return newMenus;
    // }
  },

  // 这里的 actions 和 vuex 不一样,这里可以写同步方法 也可以写异步方法
  actions: {
    // 点击 切换 isCollapse
    toggleIsCollapse() {
      this.isCollapse = !this.isCollapse;
    },

    // 更新 menus 的方法
    updateMenus(menus: IMenuModel[]) {
      this.menus = menus;
    }
  },
})


// 你可以认为 state 是 store 的数据 (data)，
// getters 是 store 的计算属性 (computed)，
// 而 actions 则是方法 (methods)。

